<template>
    <view>
        <view class="cu-bar bg-white search fixed" :style="[{top:CustomBar + 'px'}]">
            <view class="search-form round">
                <text class="cuIcon-search"></text>
                <input type="text" placeholder="输入搜索的关键词" confirm-type="search" v-model="keyValue"></input>
            </view>
            <view class="action">
                <button class="cu-btn bg-gradual-pink shadow-blur " @click="clear">清空</button>
            </view>
            <view class="action">
                <button class="cu-btn bg-gradual-pink shadow-blur " style=" margin-right: 15px;" @click="reload">刷新</button>
            </view>
            <view class="action">
                <button class="cu-btn bg-gradual-pink shadow-blur " @click="showAddModal" >新增</button>
            </view>
        </view>

        <scroll-view scroll-y style="position: absolute"
                     :style="[{height:'calc(100vh - 100px - '+ CustomBar + 'px)',top:CustomBar+50+'px'}]">
            <view class="cu-list menu-avatar">
                <view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''"
                      v-for="(value,index) in list" :key="index"
                      @touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd"
                      :data-target="'move-box-' + index">
                    <view class="uni-media-list-logo uni-flex uni-column">
                        <image v-if="showImg" :src="value.img" class="trans"></image>
                    </view>
                    <view class="uni-flex uni-column" style="flex: 1;justify-content: space-between; margin-left: 10px">
                        <view class="text" style="height: 40upx;text-align: left;">
                            {{value.productName}}
                        </view>
                        <view class="uni-flex uni-row">
                            <view class="text" style="flex: 1;">小代:{{value.priceSmall}}</view>
                            <view class="text" style="flex: 1;">大代:{{value.priceBig}}</view>
                            <view class="text" style=" color:#FF3333; flex: 1;">零售:{{value.priceSale}}</view>
                        </view>
                    </view>
                    <view class="move action">
                            <button class="cu-btn bg-green shadow" style="height: 100%; width:100%" @tap="showEditModal(value.id)" data-target="Modal">编辑</button>
                    </view>
                </view>
            </view>
        </scroll-view>
        <view class="cu-modal" :class="modalName=='Modal'?'show':''">
            <view class="cu-dialog">
                <view class="cu-bar bg-white justify-end">
                    <view class="content">编辑</view>
                    <view class="action" @tap="hideModal">
                        <text class="cuIcon-close text-red"></text>
                    </view>
                </view>
                <view class="padding-xl">
                    <form>
                        <view v-show="false" class="cu-form-group">
                            <view class="title">id</view>
                            <input name="productType" v-model="product.productType">
                        </view>
                        <view v-show="false" class="cu-form-group">
                            <view class="title">id</view>
                            <input name="id" v-model="product.id">
                        </view>
                        <view class="cu-form-group margin-top">
                            <view class="title">产品名称</view>
                            <input name="productName" v-model="product.productName">
                        </view>
                        <view class="cu-form-group">
                            <view class="title">小代</view>
                            <input  name="priceSmall" v-model="product.priceSmall">
                        </view>
                        <view class="cu-form-group">
                            <view class="title">大代</view>
                            <input name="priceBig" v-model="product.priceBig">
                        </view>
                        <view class="cu-form-group">
                            <view class="title">零售</view>
                            <input name="priceSale" v-model="product.priceSale">
                        </view>
                    </form>
                </view>
                <view class="padding flex flex-direction">
                    <button class="cu-btn bg-red margin-tb-sm lg" @click="submitForm(e)" >提交</button>
                </view>
            </view>
        </view>
        <view class="cu-modal" :class="modalName=='ModalAdd'?'show':''">
            <view class="cu-dialog">
                <view class="cu-bar bg-white justify-end">
                    <view class="content">新增</view>
                    <view class="action" @tap="hideModal">
                        <text class="cuIcon-close text-red"></text>
                    </view>
                </view>
                <view class="padding-xl">
                    <form>
                        <view v-show="false" class="cu-form-group">
                            <view class="title">id</view>
                            <input name="productType" v-model="product.productType">
                        </view>
                        <view v-show="false" class="cu-form-group">
                            <view class="title">id</view>
                            <input name="id" v-model="product.id">
                        </view>
                        <view class="cu-form-group margin-top">
                            <view class="title">产品名称</view>
                            <input name="productName" v-model="product.productName">
                        </view>
                        <view class="cu-form-group">
                            <view class="title">小代</view>
                            <input  name="priceSmall" v-model="product.priceSmall">
                        </view>
                        <view class="cu-form-group">
                            <view class="title">大代</view>
                            <input name="priceBig" v-model="product.priceBig">
                        </view>
                        <view class="cu-form-group">
                            <view class="title">零售</view>
                            <input name="priceSale" v-model="product.priceSale">
                        </view>
                    </form>
                </view>
                <view class="padding flex flex-direction">
                    <button class="cu-btn bg-red margin-tb-sm lg" @click="submitForm(e)" >提交</button>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                showImg: true,
                StatusBar: this.StatusBar,
                CustomBar: this.CustomBar,
                orderProductList: [],
                modalName: '',
                keyValue: '',
                modalShow: '',
                product:[],
            }
        },
        props: {
            productList: {
                type: Array,
                default() {
                    return []
                }
            },
            typeInfo:{
                type: String,
                default() {
                    return "jwbc"
                }
            }
        },
        methods: {

            vueTouch(value) {
                this.$set(value, "enableEdit", !value.enableEdit)
            },
            clear() {
                this.keyValue = ''
            },
            showModal(e) {
                this.modalName = e.currentTarget.dataset.target
            },
            hideModal(e) {
                this.modalName = null
            },
            // ListTouch触摸开始
            ListTouchStart(e) {
                this.listTouchStart = e.touches[0].pageX
            },

            // ListTouch计算方向
            ListTouchMove(e) {
                this.listTouchDirection = this.listTouchStart-e.touches[0].pageX > 40 ? 'left' :
                    this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 40 ? 'right' :''

            },

            // ListTouch计算滚动
            ListTouchEnd(e) {
                if (this.listTouchDirection == 'left') {
                    this.modalName = e.currentTarget.dataset.target
                }
                if (this.listTouchDirection == 'right') {
                    this.modalName = null
                }
                this.listTouchDirection = null
            },
            getData: function (type) {
                this.productList=[];
                uni.showLoading({
                    title: '汪汪汪,加载中'
                });
                uni.request({
                    url: 'http://47.100.177.119/music/wx/getproductlistbytype/' + type,
                    success: (res) => {
                        this.productList = res.data
                        this.productList.forEach(item=>{
                            item.enableEdit=false;
                        })
                        uni.hideLoading();
                    }
                });

            },
            reload:function(){
                uni.request({
                    url: 'http://47.100.177.119/music/wx/reloadproductlist',
                    success: (res) => {
                        //刷新数据
                        this.getData(this.typeInfo)
                    }
                });
            },
            showEditModal:function(id){
                this.modalName="Modal"
                this.productList.filter((value) => {
                    if(value.id==id){
                        this.product=value;
                    }
                });
            },
            showAddModal:function(){
                this.modalName="ModalAdd"
                this.product={}
                this.product.productType=this.typeInfo;
                this.product.img='https://qwer90497.oss-cn-shanghai.aliyuncs.com/proxy/20190514151758.png'
            },
            submitForm:function(e){
                uni.request({
                    url: 'http://47.100.177.119/music/wx/saveOrUpdateProduct',
                    method:'post',
                    header: {
                        'content-type': 'application/json',
                    },
                    data:JSON.stringify(this.product),
                    success: (res) => {
                        //刷新数据
                        this.modalName="";
                        this.reload();

                    }
                });

            }
        },
        computed: {
            list() {
                if (this.keyValue) {
                    return this.productList.filter((value) => {  //过滤数组元素
                        return value.productName.includes(this.keyValue)
                        //如果包含字符返回true
                    });
                } else {
                    return this.productList
                }
            }
        },
        onLoad() {
			this.getData(this.typeInfo)
            setTimeout(() => {
                this.showImg = true;
            }, 200)
        }
    }
</script>

<style>
    .title {
        padding: 20 upx;
    }

    .trans {
        -moz-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        transform: scaleX(-1);
    }

    .uni-media-list-text-top {
        line-height: 36 upx;
        font-size: 30 upx;
        margin-left: 20 upx;
    }

    .flex-item {
        width: 33.3%;
        height: 36 upx;
        text-align: center;
        line-height: 36 upx;
    }
</style>
